// 加载公共样式
require('../../assets/css/public.less')

// 引入自己样式
require('./user-detail.less')

// 引入字体图标
require('../../assets/public/fonts/iconfont.css')

// 服务器地址
const API = 'http://fitness.h5.itsource.cn:3701'
// 引入axios
const request = require('../../lib/request/request')

// 获取元素
function $(sel) {
    return document.querySelector(sel)
}

function $a(sel) {
    return document.querySelectorAll(sel)
}

window.onload = () => {


    //获取用户信息
    function getUserInfo() {
        request.get('/api/user/info').then(res => {
            //1 解构数据
            let { errno, data } = res.data
            //2 判断
            if (errno === 0) {
                //3 处理业务逻辑
                render(data)
            }
        })
    }

    //渲染数据
    function render(data) {
        //图片渲染 服务器地址+相对路径+文件名
        avatar.src = API + data.imgUrl
        $('#nickName').value = data.nickName
        $('#secletSex').textContent = data.gender ?? '请选择性别'
        $('#secletBirhtday').textContent = data.birthday ?? '请选择生日'
        $('#text').value = data.sign || '输入个人介绍'
        // $('#secletCity').textContent = data.cityId

    }

    //初始化获取用户信息
    getUserInfo()

    //监听file 输入框的change事件
    $('#upload').addEventListener('change', e => {
        console.log('e :>> ', e.target.files[0])
        //创建FormData 对象 添加文件
        const formData = new FormData()
        formData.append('file', e.target.files[0])
        // console.log(22);
        //发送ajax请求
        request.post('/api/circles/uploadImg', formData).then(res => {
            // console.log(11);
            console.log('res.data :>> ', res.data)

            // 回显头像
            // 结构数据
            let { errno, data } = res.data
            // 判断
            if (errno === 0) {
                $('#avatar').src = API + data.url
            }
            //图片渲染 服务器地址+相对路径+文件名
            // avatar.src = API + res.data.data.url
        })
    })

    //性别选择器
    $('#showSexPicker').addEventListener('click', () => {
        weui.picker(
            [
                {
                    label: '男',
                    value: 0,
                },
                {
                    label: '女',
                    value: 1,
                },
            ],
            {
                onConfirm: function (result) {
                    console.log(result)
                    $('#secletSex').textContent = result[0].label
                },
                title: '性别选择',
            }
        )
    })

    //生日选择器
    $('#showDatePicker').addEventListener('click', () => {
        weui.datePicker({
            start: 1990,
            end: new Date().getFullYear(),
            onConfirm: function (result) {
                console.log(result)
                $('#secletBirhtday').textContent = result.map(v => String(v.value).padStart(2, '0')).join('-')
            },
            title: '选择生日',
        })
    })

    //获取省份
    let provinces = []//储存省份(后面获取城市需要)
    // 获取省份信息
    function getProvinces() {
        request.get('api/shared/province')
            .then(res => {
                console.log(res);
                // 解构数据
                let { data, errno } = res.data
                // 判断
                if (errno === 0) {
                    // 处理数据
                    provinces = data.map(v => {
                        return {
                            label: v.name,
                            value: v.id,
                        }
                    })
                }
            })
    }
    getProvinces()


    // 获取dom
    let cityId = ''
    let provinceId1 = '' //给城市用的id

    // 省份选择器
    //获取数据后，再绑定省份选择器
    $('#showProvincePicker').addEventListener('click', () => {
        weui.picker(provinces,
            {
                onConfirm: function (result) {
                    console.log(result)
                    $('#secletProvince').textContent = result[0].label
                    provinceId1 = result[0].value //给城市用的id
                    //获取城市信息
                    getCity(result[0].value)
                },
                title: '省份选择',
            }
        )
    })

    //获取城市
    let pickerOldHandler = null //用于储存上一次的 弹窗函数

    function getCity(provinceId) {

        request.get('/api/shared/city', {
            params: {
                provinceId,
            }
        }).then(res => {
            console.log(res.data);
            //解构数据
            let { errno, data } = res.data
            //判断
            if (errno === 0) {
                //处理数据
                let citys = data.map(v => ({ label: v.name, value: v.id }))

                //设置一个容器存储函数体
                function handler() {
                    weui.picker(citys, {
                        //确定才选中
                        onConfirm: function (result) {
                            //数据回显
                            $('#secletCity').textContent = result[0].label
                            cityId = result[0].value
                        },
                        title: '城市选择',
                    })

                }
                //清除上一次的点击事件
                showCityPicker.removeEventListener('click', pickerOldHandler)
                //把这一次的弹窗函数 赋值给外层变量.使得pickerOldHandler进入闭包存储起来
                pickerOldHandler = handler

                //获取数据之后 再绑定选择器 渲染内容
                showCityPicker.addEventListener('click', handler)

            }

        })
    }

    // 文本域监听
    $('#text').addEventListener('input', () => {
        $('.textLength').textContent = $('#text').value.length

    })

    // 提交表单
    submit.addEventListener('click', () => {
        request.post('/api/user/changeInfo', {
            nickName: nickName.value,
            gender: secletSex.textContent,
            provinceId: provinceId1,
            cityId: cityId,
            birthday: secletBirhtday.textContent,
            imgUrl: avatar.src.replace(API, ''),
            sign: text.value,
        })
            .then(res => {
                console.log('res.data :>> ', res.data)
                //解构数据
                let { errno, data } = res.data
                //判断
                if (errno === 0) {
                    //更新token
                    localStorage.setItem('token', 'Bearer ' + data.token)
                }
            })
    })



}
